<template>
 <div id="Application">
 <!-- 游戏区域 -->
 <div class="container">
 <!-- 底部挡板 -->
 <div class="board" :style="{ left: boardX + 'px' }"></div>
 <!-- 弹球 -->
 <div class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></div>
 <!-- 游戏结束提示 -->
 <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
 </div>
 </div>
 </template>
<script>
 export default {
 data() {
 return {
 // 控制挡板位置
 boardX: 0,
 // 控制弹球位置
 ballX: 0,
 ballY: 0,
 // 控制弹球移动速度
 rateX: 0.1,
 rateY: 0.1,
 // 控制结束游戏提示的展示
 fail: false
 };
 },
 // 组件生命周期函数，组件加载时会调用
 mounted() {
 // 添加键盘事件
 this.enterKeyup();
 // 随机弹球的运动速度和方向
 this.rateX = Math.random() * 0.5 + 0.1;
 this.rateY = Math.random() * 0.5 + 0.1; // 开启计数器，控制弹球移动
 this.timer = setInterval(() => {
 // 到达右侧边缘进行反弹
 if (this.ballX + this.rateX >= 440 - 30) {
 this.rateX *= -1;
 }
 // 到达左侧边缘进行反弹
 if (this.ballX + this.rateX <= 0) {
 this.rateX *= -1;
 }
 // 到达上侧边缘进行反弹
 if (this.ballY + this.rateY <= 0) {
this.rateY *= -1;
 }
 this.ballX += this.rateX;
 this.ballY += this.rateY;
 // 失败判定
 if (this.ballY >= 440 - 30 - 10) {
 // 挡板接住了弹球，进行反弹
 if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {
 this.rateY *= -1;
} else {
 // 没有接住弹球，游戏结束
 clearInterval(this.timer);
 this.fail = true;
 }
}
 }, 2);
 },
 methods: {
 // 控制挡板移动
 keydown(event) {
 if (event.key === "ArrowLeft") {
 if (this.boardX > 10) {
 this.boardX -= 20;
 }
 } else if (event.key === "ArrowRight") {
 if (this.boardX < 440 - 80) {
 this.boardX += 20;
 }
 }
 },
enterKeyup() {
 document.addEventListener("keydown", this.keydown);

}

}

};
</script>
<style>
body {
    margin: 0;
    padding: 0;
}
.container {
 position: relative;
 margin: 0 auto;
 width: 440px;
 height: 440px;
 background-color: blanchedalmond;
 }
.ball {
 position: absolute;
 width: 30px;
 height: 30px;
 left: 0px;
 top: 0px;
 background-color: orange;
 border-radius: 30px;
}
.board {
 position: absolute;
 left: 0;
 bottom: 0;
 height: 10px;
 width: 80px;
 border-radius: 5px;
 background-color: red;
 }
</style>